<!--
	此示例下载自 https://echarts.js.cn/examples/zh/editor.html?c=dataset-encode0
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"  lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<th:block th:include="include :: footer"/>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
<script type="text/javascript">
    $.post('/home/getstatistiscp', {type:1}, function (res) {
       // console.log(res.data)
        var lists = []; //处理为list数据 统计图可显示的
        for (let i = 0; i < res.data.length; i++) {
            var list = []
            list.push(res.data[i].val,res.data[i].deptName,res.data[i].val);
            lists.push(list)
        }
        var dom = document.getElementById('container');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};

        var option;
        //console.log(lists)
        option = {
            dataset: {
                source: lists.reverse()  //将数组倒叙
            },
            grid: {containLabel: true},
            xAxis: {name: '下载量'},
            yAxis: {type: 'category'},
            visualMap: {
                orient: 'horizontal',
                left: 'center',
                min: 10,
                max: 10000,
                text: ['最大', '最小'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#65B581', '#FFCE34', '#FD665F']
                }
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    }
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        window.addEventListener('resize', myChart.resize);
    })
</script>
</body>
</html>